// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Fk
import Fk.Components.Common
import Fk.Widgets as W

Rectangle {
  color: "transparent"
  property bool isLobby: false

  function append(chatter) {
    chatLogBox.append({ logText: chatter })
  }

  function loadSkills() {
    for (let i = 1; i <= 23; i++) {
      skills.append({ name: "fastchat_m", idx: i });
    }
  }

  Timer {
    id: opTimer
    interval: 1500
  }

  Item {
    anchors.fill: parent

    Item {
      width: parent.width
      height: parent.height - inputArea.height

      LogEdit {
        id: chatLogBox
        anchors.fill: parent
        anchors.topMargin: 8
        anchors.leftMargin: 4
        anchors.bottomMargin: 8
        highlight: Rectangle { color: "#b2231c16"; radius: 5; opacity: 0.8 }

        Component.onCompleted: {
          for (var i = 0; i < chatLogBox.children.length; i++) {
            var child = chatLogBox.children[i];
            if (child instanceof Button) {
              child.visible = false;
              break;
            }
          }
        }

        Image {
          anchors.right: chatLogBox.right
          anchors.bottom: chatLogBox.bottom
          anchors.rightMargin: 14
          width: 16
          height: 16
          source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/system/returnBottom.png"
          fillMode: Image.PreserveAspectFit
          z: 999
          visible: chatLogBox.currentIndex !== chatLogBox.model.count - 1
          
          MouseArea {
            anchors.fill: parent
            onClicked: {
              chatLogBox.currentIndex = chatLogBox.model.count - 1
            }
          }
        }
      }
    }

    Rectangle {
      anchors.fill: emojiSelector
      anchors.topMargin: -5
      anchors.leftMargin: -1
      color: '#2c302f'
      border.width: 1
      border.color: '#222222'
      visible: emojiSelector.visible
    }

    GridView {
      id: emojiSelector
      width: parent.width
      height: 110
      anchors.bottom: inputArea.top
      cellHeight: 24
      cellWidth: 24
      model: 59
      visible: false
      clip: true
      delegate: ItemDelegate {
        Image {
          height: 16; width: 16
          anchors.centerIn: parent
          source: AppPath + "/image/emoji/" + index
        }
        onClicked: chatEdit.insert(chatEdit.cursorPosition,
                                   "{emoji" + index + "}");
      }
    }

    Rectangle {
      anchors.fill: soundSelector
      anchors.topMargin: -5
      anchors.leftMargin: -1
      color: '#2c302f'
      border.width: 1
      border.color: '#222222'
      visible: soundSelector.visible
    }

    ListView {
      id: soundSelector
      width: parent.width
      height: 110
      anchors.bottom: inputArea.top
      visible: false
      clip: true
      ScrollBar.vertical: ScrollBar {}
      model: ListModel {
        id: skills
      }
      // onVisibleChanged: {skills.clear(); loadSkills();}

      delegate: ItemDelegate {
        width: soundSelector.width
        height: 15

        Text {
          id: soundSelectorText
          text: Lua.tr("$" + name + (idx ? idx.toString() : ""))
          color: "#E4D5A0"
          font.pixelSize: 9
        }

        onClicked: {
          opTimer.start();
          const general = roomScene.getPhoto(Self.id).general;
          let skill = "fastchat_m";
          if (general !== "") {
            const data = Lua.call("GetGeneralDetail", general);
            const gender = data.gender;
            if (gender !== 1) {
              skill = "fastchat_f";
            }
          }
          ClientInstance.notifyServer(
            "Chat",
            {
              type: isLobby ? 1 : 2,
              msg: "$" + skill + ":" + idx
            }
          );
          soundSelector.visible = false;
        }
      }
    }

    Image {
      source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/system/chatInputBg.png"
      anchors.fill: inputArea
      anchors.leftMargin: -2
    }

    Row {
      id: inputArea
      height: 23
      width: parent.width
      anchors.bottom: parent.bottom
      spacing: 0
      Rectangle {
        width: parent.width - returnBtn.width - emojiBtn.width - soundBtn.width
        color: "transparent"
        height: parent.height

        TextInput {
          id: chatEdit
          anchors.fill: parent
          anchors.margins: 4
          color: '#a5917a'
          clip: true
          font.pixelSize: 10
          maximumLength: 300

          onAccepted: {
            if (text != "") {
              opTimer.start();
              ClientInstance.notifyServer(
                "Chat",
                {
                  type: isLobby ? 1 : 2,
                  msg: text
                }
              );
              text = "";
              focus = false;
            }
          }

          Keys.onPressed: (event) => {
            if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
              event.accepted = true;
                if (text != "") {
                opTimer.start();
                ClientInstance.notifyServer(
                  "Chat",
                  {
                    type: isLobby ? 1 : 2,
                    msg: text
                  }
                );
                text = "";
              }
              focus = false;
            }
          }
        }
      }

      Image {
        id: returnBtn
        source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/system/returnBtOn.png"
        height: 20
        width: sourceSize.width * height / sourceSize.height
        anchors.verticalCenter: parent.verticalCenter
        fillMode: Image.PreserveAspectFit
        property bool hovered: false
        MouseArea {
          anchors.fill: parent
          hoverEnabled: true
          onEntered: {
            cursorShape = Qt.PointingHandCursor;
            parent.hovered = true;
          }
          onExited: {
            cursorShape = Qt.ArrowCursor;
            parent.hovered = false;
          }
          onClicked: {
            if (!opTimer.running) {
              chatEdit.accepted();
            }
          }
        }
        BrightnessContrast {
          anchors.fill: parent
          source: parent
          brightness: parent.hovered ? 0.3 : -0.4
          contrast: parent.hovered ? 0 : -0.4
          visible: opTimer.running || parent.hovered
        }
      }
      

      Image {
        id: emojiBtn
        source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/system/chatfaceBtOn.png"
        height: 20
        width: sourceSize.width * height / sourceSize.height
        anchors.verticalCenter: parent.verticalCenter
        fillMode: Image.PreserveAspectFit
        property bool hovered: false

        MouseArea {
          anchors.fill: parent
          hoverEnabled: true
          onEntered: {
            cursorShape = Qt.PointingHandCursor;
            parent.hovered = true;
          }
          onExited: {
            cursorShape = Qt.ArrowCursor;
            parent.hovered = false;
          }
          onClicked: {
            if (!opTimer.running) {
              soundSelector.visible = false;
              emojiSelector.visible = !emojiSelector.visible;
            }
          }
        }
        BrightnessContrast {
          anchors.fill: parent
          source: parent
          brightness: parent.hovered ? 0.3 : -0.4
          contrast: parent.hovered ? 0 : -0.4
          visible: opTimer.running || parent.hovered
        }
      }

      Image {
        id: soundBtn
        source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/system/easytextBtOn.png"
        height: 20
        width: sourceSize.width * height / sourceSize.height
        anchors.verticalCenter: parent.verticalCenter
        fillMode: Image.PreserveAspectFit
        property bool hovered: false

        MouseArea {
          anchors.fill: parent
          hoverEnabled: true
          onEntered: {
            cursorShape = Qt.PointingHandCursor;
            parent.hovered = true;
          }
          onExited: {
            cursorShape = Qt.ArrowCursor;
            parent.hovered = false;
          }
          onClicked: {
            if (!opTimer.running) {
              emojiSelector.visible = false;
              soundSelector.visible = !soundSelector.visible;
            }
          }
        }
        BrightnessContrast {
          anchors.fill: parent
          source: parent
          brightness: parent.hovered ? 0.3 : -0.4
          contrast: parent.hovered ? 0 : -0.4
          visible: opTimer.running || parent.hovered
        }
      }

    }
  }

  Component.onCompleted: {
    append('<font color = "#cf3f00"; size = "1"><b>系统</b></font>' + ' ' + '<font color="#e4d5a0"; size = "1">本房间开放聊天</font>')
    loadSkills();
  }
}